import { useEffect, useRef } from 'react';
import { useAppDispatch, useAppSelector, type RootState } from '../../store/store'; // 导入全局类型
import styles from './hot.module.css';
import { fetchMedicalContent, clearContent } from '../../store/medicalContentSlice'; // 导入仓库方法
const Hot = () => {
    const dispatch = useAppDispatch()
    const {
        page, // 当前页码（全局）
        pageSize, // 每页条数（全局）
        isLoading, // 加载状态
        hasMore, // 是否有更多数据（用于加载更多）
        bannerList, // 轮播图数据
        byType,
    } = useAppSelector((state: RootState) => state.medicalContent);
    const hotNews = (byType && (byType as any).healthNews) ? (byType as any).healthNews : [];
    const getRequestParams = (currentPage: number) => ({
    contentType: 'healthNews' as const, // 内容类型：单一频道资讯
    channel_id: '0', // 生活频道专属 ID（育儿=6，辟谣=18）
    page: currentPage, // 当前页码
    pageSize: 10, // 每页显示 10 条
    from_wx_mini: 'true', // 固定参数（按后端要求传）
    partner: 'chunyuyisheng', // 固定参数（按后端要求传）
    release_time: '180', // 筛选 180 天内的数据
  });
  // 仅在列表数据变更时打印，避免渲染阶段反复打印

  useEffect(() => {
    if (!hotNews || hotNews.length === 0) {
      dispatch(fetchMedicalContent(getRequestParams(1)));
    }

    // 组件卸载时清空当前频道数据（避免切换页面后数据残留）
    return () => {
      dispatch(clearContent('healthNews')); // 清空单一频道数据
    };
  }, [dispatch]);
  const handleLoadMore = () => {
    if (isLoading || !hasMore) return; // 加载中/无更多数据时，禁止重复请求
    const size = pageSize || 10;
    const nextPage = Math.floor((hotNews?.length || 0) / size) + 1;
    dispatch(fetchMedicalContent(getRequestParams(nextPage)));
  };

  // 无限滚动：使用 IntersectionObserver 监听列表底部的哨兵元素
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (!hasMore) return; // 没有更多时不再监听
    const target = sentinelRef.current;
    if (!target) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (entry.isIntersecting) {
          handleLoadMore();
        }
      },
      {
        root: null, // 以视口为容器
        rootMargin: '200px 0px', // 提前 200px 触发，提升体验
        threshold: 0.01,
      }
    );

    observer.observe(target);
    return () => {
      observer.unobserve(target);
      observer.disconnect();
    };
  }, [hasMore, isLoading, page]);

    return (
        <div>
              <div className={styles['life-news-container']}>
      {/* 轮播图（若有数据） */}
      {bannerList.length > 0 && (
        <div className="banner">
          {bannerList.map((item, idx) => (
            <img key={idx} src={item.image} alt={`life-banner-${idx}`} />
          ))}
        </div>
      )}

      {/* 加载中提示 */}
      {isLoading && hotNews.length === 0 && <div>加载热点资讯中...</div>}

      {/* 资讯列表 */}
      {hotNews.length > 0 && (
        <div className={styles['news-list']}>
          {hotNews.map((news: any) => (
            <div key={news.id} className={styles['news-item']}>
              <img src={news.image} alt={news.title} className={styles['news-img']} />
              <div className={styles['news-content']}>
                <h3 className={styles['news-title']}>{news.title}</h3>
                <div className={styles['news-meta']}>
                  <span>生活 {news.date_str}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 无限列表哨兵 */}
      <div ref={sentinelRef} style={{ height: 1 }} />

      {/* 加载中状态（用于追加加载时的提示） */}
      {isLoading && hotNews.length > 0 && <div>加载中...</div>}

      {/* 没有更多 */}
      {!hasMore && hotNews.length > 0 && <div>没有更多了</div>}
    </div>

        </div>
    )
}

export default Hot
